/*基金-委托查询页面  path: '/fundentrust'*/
<template>
  <div class="fund-entrust common-fun-trade">

    <header class="common-app-header">                                                                 <!--header头部-->
      <div class="common-app-btn-back" @click.stop.prevent="back"><i class="iconfont icon-fanhui"></i></div>
      <div class="header-trade-title">
        <div class="title" :class="{'active':tabIndex==0}" @click.stop.prevent="tabChange(0)"><span class="title-text">当前委托</span></div>
        <div class="title" :class="{'active':tabIndex==1}" @click.stop.prevent="tabChange(1)"><span class="title-text">历史委托</span></div>
      </div>
    </header>
    <div>
      <fund-today v-if="tabIndex==0"></fund-today>
      <fund-before v-if="tabIndex==1"></fund-before>
    </div>
    </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import Constant from 'common/constant'
  import CommonUtil from 'common/common.util'
  import FundToday from 'components/fund/FundToday'
  import FundBefore from 'components/fund/FundBefore'
  export default {
    data () {
      return {
        tabIndex:0,                                    //     默认是今日
        start: 0,
        limit: 20,
        message: '',
        mes: 0,
        client_id:'',                              //    相当于userCode
      }
    },
    components: {
      'fund-today':FundToday,
      'fund-before':FundBefore
    },
    created () {
      this.client_id = LocalDAO.getUserCode() ? LocalDAO.getUserCode() : '';                       // get userCode
    },
    methods:{
      back(){
        if(this.btn ==  Constant.leftBtn.CLOSE || typeof (this.$route.query.cleanStorage)!== 'undefined'){
          window.location.href = 'gtjanormal://goback'
        }else{
          this.$router.go(-1)
        }
      },
      tabChange(index){
        let kv = {"usercode":LocalDAO.getUserCode()}
        let eventId = ''
        if(index === 0) {
          eventId = '21009'
        }else if(index === 1) {
          eventId = '21010'
        }
        if(eventId !== ''){
          TDAPP.onEvent(eventId,"",kv)
          TDAPP.send()
        }
        this.tabIndex = index;
      }
    }
  }
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  .loadmore{
    width: 100%;
  }
  .rightcopy{
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    line-height: 43px;
    /*background-color: #5d5d5d;*/
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .anon{
    margin-right: -12px;
    margin-left: -12px;
    margin-top: 18px;
  }
  .date{
    display: block;
    font-size: 12px;
    color: #989898;
  }
.wrap{
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.game-date-wrap{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 76px;
  width: 100%;
  background-color: white;
  border-bottom: 10px solid #f2f3f7;
  padding-bottom: 7px;
}
.game-date-wrap-left{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-around;
}
.game-date-wrap-right{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-around;
}
.left-down-left{
  align-self: stretch;
}
.game-date_start-date-wrap{
  color: #565656;
  border: solid 1px #D8D8D8;
  /* padding: 4px; */
  border-radius: 3px;
  display: inline-block;
  width: 123px;
  height: 31px;
}
.game-date_start-date_value{
  height: 31px;
  line-height: 31px;
}
.game-date_end-date_value{
  height: 31px;
  line-height: 31px;
}
.game-date_start-date-wrap i{
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
  height: 30px;
  line-height: 30px;
}
.game-date_end-date-wrap{
  color: #565656;
  border: solid 1px #D8D8D8;
  /* padding: 4px; */
  border-radius: 3px;
  display: inline-block;
  width: 123px;
  height: 31px;
}
.game-date_end-date-wrap i{
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
  height: 30px;
  line-height: 30px;
}
.search{
  margin-top: 20px;
  width: 61px;
  height: 29px;
  background-color: #1bafeb;
  color: white;
  border-radius: 5px;
  line-height: 29px;
  text-align: center;
}
  .box{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 91.5px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
  }
  .left{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    align-self: center;
  }
  .left-up{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: -40px;
  }
  .left-down{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: -30px;
  }
  .left-down span{
    display: block;
    padding-left: 4px;
    padding-right: 9px;
  }
  .left-up-left{
    display: inline;
    width: 80%;
    /*align-self: flex-start;*/
  }
  .left-up-right{
    display: inline;
    margin-left: 5px;
  }
.rg{
  width: 30px;
  height: 18px;
  background-color: #ff9f52;
  font-size: 12px;
  color: white;
  border-radius: 3px;
}
.sg{
  width: 30px;
  height: 18px;
  background-color: #f66e7b;
  font-size: 12px;
  color: white;
  border-radius: 3px;
}
.sh{
  width: 30px;
  height: 18px;
  background-color: #a460c8;
  font-size: 12px;
  color: white;
  border-radius: 3px;
}
.left-up-left-mid{
  padding-left: 3px;
  font-size: 16px;
}
.left-up-left-last{
  font-size: 10px;
  color: #979797;
  padding-left: 5px;
}
  .right{
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    line-height: 43px;
    background-color: #5d5d5d;
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .header-trade-title{
    width: 180px;
    height: 30px;
    line-height: 30px;
    margin: 7px auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: RGBA(48,71,187,0.6);
    border-radius: 15px;
    border: 1px solid #6D92D7;
  }
  .title{
    height: 30px;
    line-height: 28px;
    width: 89px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left-down-left .fir{
    font-size: 14px!important;
  }
  .left-down-middle .fir{
    font-size: 14px!important;
  }
  .left-down-right .fir{
    font-size: 14px!important;
  }
  .left-down-left .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .left-down-middle .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .left-down-right .sec{
    font-size: 12px !important;
    color: #999999 !important;
  }
  .title.active{
    border-radius: 20px;
    color: #2E55C6;
    background: #FFFFFF;
  }
  .judge .left-down-middle{
    width: 29%;
    margin-right: 5px;
    margin-left: 5px;
  }
  .judge .left-down-right{
    width: 24%;
    margin-left: -25px;
    margin-right: 36px;
  }
@media screen and (max-width: 320px) {
  .rightcopy{
    box-sizing: border-box;
    width: 35px;
    height: 35px;
    line-height: 35px;
    /*background-color: #5d5d5d;*/
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .left-up-left-mid {
      font-size: 13px;
  }
  .left-up-right img{
    width: 41.5px !important;
    height: 29.8px !important;
    padding-top: 3px !important;
  }
  .game-date_start-date-wrap{
    height: 26.35px !important;
    width: 102.85px !important;
    line-height: 26.35px !important;
  }
  .game-date_start-date-wrap i{
    font-size: 10px;
    height: 25px;
    line-height: 25px;
  }
  .game-date_end-date-wrap i{
    font-size: 10px;
    height: 25px;
    line-height: 25px;
  }
  .game-date_end-date-wrap{
    height: 26.35px !important;
    line-height: 26.35px !important;
    width: 102.85px !important;
  }
  .game-date_start-date_value{
    line-height: 26.35px;
  }
  .game-date_end-date_value{
    line-height: 26.35px;
  }
  .search{
    width: 51.85px;
    height: 24.65px;
    line-height: 24.65px;
  }
  .right{
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #5d5d5d;
    color: white;
    font-size: 10px;
    border-radius: 5px;
    text-align: center;
  }
}
@media screen and (max-width: 375px) {
  .left-up-right img{
    width: 57.6px;
    height: 41.4px;
  }
}
</style>
